<!--
 * @Descripttion: 
 * @version: 
 * @Author: Jf W
 * @Date: 2021-08-12 16:25:03
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-13 13:17:48
-->
<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 80%"
      :row-class-name="methods.tableRowClassName"
    >
      <template
        v-for="(col, index) in tableHeader"
        :key="index"
      >
        <el-table-column
          prop="date"
          :label="col.colTitle"
          :width="col.width"
          :id="col.id"
        />
      </template>
    </el-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  props: {
    // 表格宽度
    tableWidth: {
      type: String,
      default: '80%'
    },
    tableHeader: {
      type: Array,
      default: () => [
        {
          colTitle: '产品ID',
          id: 0,
          width: '80'
        },
        {
          colTitle: '保险名称',
          id: 1,
          width: '180'
        },
        {
          colTitle: '保险公司',
          id: 2,
          width: '180'
        },
        {
          colTitle: '负责人',
          id: 3,
          width: '80'
        },
        {
          colTitle: '归属公司',
          id: 4,
          width: '180'
        },
        {
          colTitle: '功能',
          id: 5,
          width: '80'
        }
      ]
    },
    tableData: {
      type: Array
    }
  },
  setup() {
    // 表格中的数据
    const tableData0 = reactive([
      {
        companyId: '123456',
        insurance: '阳光险',
        insuranceCompany: '中国平安',
        director: '王小虎',
        company: '华程国旅',
        handleFunction: '删除'
      },
      {
        companyId: '123456',
        insurance: '阳光险',
        insuranceCompany: '中国平安',
        director: '王小虎',
        company: '华程国旅',
        handleFunction: '删除'
      }
    ])

    const methods = reactive({
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        }
        return '';
      }
    })

    return {
      tableData0,
      methods
    }
  }
})
</script>

<style lang="scss" scoped>
.el-table--fit {
  width: 80% !important;
}

.el-table .warning-row {
  background: oldlace;
}
</style>